<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>将Heiui的AutoComplete(模糊匹配)功能集成至Vue项目中 &middot; MY Blog</title>

  
  <link type="text/css" rel="stylesheet" href="/rliners_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/rliners_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/rliners_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/rliners_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-08 ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/rliners_technology_blog/"><h1>MY Blog</h1></a>
      <p class="lead">
       这里是Rliner的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/rliners_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>将Heiui的AutoComplete(模糊匹配)功能集成至Vue项目中</h1>
  <time datetime=2019-07-08T20:46:58&#43;0800 class="post-date">Mon, Jul 8, 2019</time>
  <pre><code>首先我们需要在我们的Vue项目中安装对于模糊匹配功能的组件依赖
</code></pre>
<pre><code>npm install fetch-jsonp --save
</code></pre><p>然后打开Heiui的官方网站. <a href="https://www.heyui.top/component/data/plugin/autocomplete">https://www.heyui.top/component/data/plugin/autocomplete</a></p>
<p>在左侧功能列表中选中AutoComplete 模糊匹配功能单击进入页面.此时可以看到页面中存在一个展开代码的按钮,点击展开.</p>
<h3 id="-复制div内容到项目中"># 复制div内容到项目中</h3>
<p>将所展开代码中的<!-- raw HTML omitted -->标签中的<!-- raw HTML omitted -->标签内容复制到Vue项目代码中.</p>
<pre><code>&lt;div&gt;
    &lt;p&gt;value:{{value}}&lt;/p&gt;
    &lt;div v-width=&quot;300&quot;&gt;&lt;AutoComplete :option=&quot;param&quot; v-model=&quot;value&quot; @change=&quot;onChange&quot; type=&quot;title&quot;&gt;&lt;/AutoComplete&gt;&lt;/div&gt;
&lt;/div&gt;

</code></pre><h3 id="-在项目中导入fetch-jsonp模块并请求某宝的数据接口"># 在项目中导入fetch-jsonp模块并请求某宝的数据接口</h3>
<p>由于在Vue项目中使用Heiui需要导入模块依赖,所以在项目的script中导入fetch-jsonp模块.</p>
<pre><code>import jsonp from 'fetch-jsonp';

const loadData = function (filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&amp;q=${filter}`)
    .then(response =&gt; response.json())
    .then((d) =&gt; {
      callback(d.result.map((r) =&gt; {
        return r[0];
      }));
    });
};

</code></pre><h3 id="-设定参数和change方法"># 设定参数和change方法</h3>
<p>由于AutoComplete中绑定了option等属性,所以要在data的return中设定几个变量:</p>
<pre><code>        value:'',   //展示输入框内的参数
       
        param: {
        orgId: 1, // 自定义参数传递
        loadData,
        minWord: 1
      }

</code></pre><p>以及在method中设定change方法:</p>
<pre><code>onChange(data, trigger) {
     log(data, trigger);
   }
 }
</code></pre><p>将二者设定成功后刷新页面,打开浏览器后查看其中的Console,如内部并无报错或警告,则证明集成AutoComplete成功.</p>

</div>


    </main>

    
  </body>
</html>
